{% extends "base.html" %}{% load pages_tags %}{% load_pages %}

        {% block content %}
        
        <div id="header" class="innerpage">
        	<div class="shadow"></div>
        	<div class="container940">
        		<h1 class="pagetitle">Product Details</h1>
                <div class="pagedesc">This can be your Tagline or something you want.</div>
                <div class="clear"></div><!-- clear float -->
            </div><!-- end container940 -->
        </div><!-- end #header -->
        
        
		<div id="content" class="withsidebar">
        	<div id="main">
            	<div id="maincontent">
                     {% for product in prod_single %}
                     <div id="single-product">
                     
                     	<div id="single-product-img">
                        	<img src="/media/images/content/product/single_product.jpg" alt="" class="frame" />
                        </div><!-- end #single-product-img -->
                     	<div id="single-product-description">
                        	<h2 class="colortext">{{ product.name}}</h2>
                            {% comment %}<span class="price">£870.00</span> {% endcomment %}
                            <p>{{product.description}}</p>
                            
                            {% comment %}
			    
			    <div class="product-option-container">
                            	<div class="product-option">
                                <form class="" method="post">
                                	<fieldset>
                                    <label for="size" id="size_label">Size</label>
                                    <select name="size" id="size">
                                       <option value="title"  selected='selected'>--Choose an option--</option><option value="date" >Most Recent</option><option value="price" >Price</option>	
                                    </select>
                                    </fieldset>
                                </form>
                                </div>
                            	<div class="product-option noborder">
                                <form class="" method="post">
                                	<fieldset>
                                    <label for="colour" id="colour_label">Colour</label>
                                    <select name="colour" id="colour">
                                       <option value="title"  selected='selected'>--Choose an option--</option><option value="date" >Most Recent</option><option value="price" >Price</option>	
                                    </select>
                                    </fieldset>
                                </form>
                                </div>
                            </div><!-- end product-option-container -->
                             
			     
			     
                            <span class="price">From:  £870.00</span>
                            
                            <div class="product-button-container">
                            	<div class="additem">
                                 <a href="#" class="min">-</a> <a href="#">1</a>  <a href="#" class="plus">+</a>
                                </div>
                            	<a href="#" class="button">Add to cart</a>
                                <span class="clear"></span>
                            </div><!-- end product-button-container -->
			                            
				                        
                            Category: <a href="#">Gadget</a>, <a href="#">Headphone</a>
			    {% endcomment %}    
                        </div><!-- end #single-product-description -->
                        
                         <div class="clear"></div><!-- clear float -->
                     </div> <!-- end #single-product -->
                     
                    <div class="tabcontainer producttab">
                        <ul class="tabs">
                            <li><a href="#tab0">Description</a></li>
                            <li><a href="#tab1">Additional Information</a></li>
                            <li><a href="#tab2">Specification</a></li>
                        </ul>
                        <div id="tab-body">
                            <div id="tab0" class="tab-content">
                                <img src="/media/images/content/pic2.jpg" alt="" class="alignleft frame" />
                                <p>{{ product.main_content }}</p>
                            </div>
                            <div id="tab1" class="tab-content">
                                <p>{{ product.additional_info }}</p>
                            </div>
                            <div id="tab2" class="tab-content">
                                <ul>{{ product.specification|safe }}</ul>
                            </div>
                        </div>
                    </div><!-- tabcontainer -->
                    {% endfor %}
                    
                    <div class="separator line"></div>
                
                   <h2 class="uppercase">Product Accessories</h2>
	{% if access %}
		
		     {% for post in access %}
			     {% if post %}
                   <ul id="relatedproduct">
                   	<li>
                    	<div class="relatedproduct-img">
                        	<a href="#"><img src="/media/images/content/product/rlp1.jpg" height="100px" width="100px" alt="" class="frame" /></a>
                        </div>
                    	<div class="relatedproduct-text">
                        	<h5 class="colortext"><a href="#">{{ post.name }}</a></h5>
                            <span class="price">£425.00</span>
                            <a href="#" class="button">Add to cart</a>
                        </div>
                    </li>
			{% endif %}
			{% endfor %}
                   </ul>
              {% else %}
		<p>There are no accessroies for this product</p>
		
	{% endif %}  
                     
					                     
                     <div class="clear"></div><!-- clear float -->
                </div><!-- end #maincontent -->
                <div id="sidebar">
			
                	
			<ul>
		<li class="widget-container">
                            <h2 class="widget-title">Product Accessories</h2>
			    {% if access %}
                    	<ul id="recentproductwidget">
				 {% for post in access %}
			     {% if post %}
                                <li>
                                    <a href="#"><img src="/media/images/content/product/lp3.jpg" alt="" class="alignleft" /></a>
                                    <span class="colortext">{{ post.name }}</span><br/>
                                    <span>{{ post.description }}</span>
                                    <span class="clear"></span>
                                </li>
				{% endif %}
		{% endfor %}
                            </ul>
                </li>
		
		
                    </ul>
			{% else %}
			
			There are nonnnnnn
		{% endif %}
                </div><!-- end #sidebar -->
                
                <div class="clear"></div><!-- clear float -->
            </div><!-- end #main -->
		</div><!-- end #content -->
        
		{% endblock %}